<template>
  <!-- <h3>个人中心组件</h3>
    <button @click="getUserInfo">获取用户详情</button><br>
    <button>更新用户信息</button><br>
    <button>更新头像</button><br>
    <button @click="getUserSongsList">获取用户歌单</button><br>
    <button>更新歌单</button> -->

  <!-- 开始画界面 -->

  <el-container>
    <!-- 个人信息展示 -->
    <el-aside width="400px">
      <!-- 头像资料卡片 -->
      <div class="card_avatar">
        <!-- 头像 -->
        <div class="avatar">
          <img :src="avatar" alt="avatar" />
        </div>
        <!-- 昵称 -->
        <div class="nickname">
          <span>{{ nickname }}</span>
        </div>
        <!-- 等级相关信息 -->
        <div class="level">
          <div>{{ follows }}关注</div>
          <div>{{ followeds }}粉丝</div>
          <div>Lv.{{ level }}</div>
        </div>
        <!-- 性别、听歌天数、年龄 -->
        <div class="accountInfo">
          <div><i :class="sex"></i>年龄{{ age }}岁</div>
          <div>乐龄{{ createDays }}天</div>
        </div>
      </div>
      <div class="card_playlist">
        <span class="span_header">我的歌单({{ playlistNumber }}个)</span>
        <div
          v-for="(item, index) in playlist"
          :key="index"
          class="item_playlist"
          @click="go_playlist(index, item.id)"
        >
          <!-- 图片 -->
          <div><img :src="item.coverImgUrl" alt="tubiao" /></div>
          <!-- 文字 -->
          <div>
            <span>{{ item.name }}</span>
            <p>
              {{ item.trackCount }}首,&nbsp;&nbsp;播放{{
                item.playCount >= 10000
                  ? Math.floor(item.playCount / 10000) + "万"
                  : item.playCount
              }}次
            </p>
          </div>
        </div>
      </div>
    </el-aside>
    <!-- 歌列表界面 -->
    <el-main>
      <el-card>
      <el-table :data="playlistData" style="width: 100%" stripe highlight-current-row @current-change="handleCurrentChange">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="name" label="歌曲">
        </el-table-column>
        <el-table-column prop="ar[0].name" label="歌手" width="200">
        </el-table-column>
        <el-table-column prop="al.name" label="专辑" width="300"> </el-table-column>
      </el-table>
    </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { getAge } from "../plugins/utils";
export default {
  name: "Personal",
  data() {
    return {
      // 用户头像url地址
      avatar: "",
      // 昵称
      nickname: "",
      // 等级
      level: "",
      // 关注人数
      follows: "",
      // 粉丝人数
      followeds: "",
      // 账号创建时间
      createDays: "",
      // 用户出生年月
      birthday: null,
      // 性别
      gender: null,
      // 歌单数量
      playlistNumber: 0,
      // 歌单信息
      playlist: [],
      // 歌单索引
      playlist_index: 0,
      // 歌单数据
      playlistData: [],
      // nth:child()
    };
  },
  methods: {
    // 获取用户详情
    async getUserInfo() {
      const { data: res } = await this.$http({
        url: "/user/detail",
        method: "post",
        data: {
          uid: window.sessionStorage.getItem("userId"),
        },
      });
      if (res.code !== 200) {
        return this.$message.error("加载用户信息失败 !");
      }
      this.avatar = res.profile.avatarUrl;
      this.nickname = res.profile.nickname;
      this.level = res.level;
      this.follows = res.profile.follows;
      this.followeds = res.profile.followeds;
      this.createDays = res.createDays;
      this.birthday = res.profile.birthday;
      this.gender = res.profile.gender;
      // console.log(res);
    },
    // 获取用户歌单
    async getUserSongsList() {
      const { data: res } = await this.$http({
        url: "/user/playlist",
        method: "post",
        data: {
          uid: window.sessionStorage.getItem("userId"),
          timestamp: this.$timestamp(),
        },
      });
      if (res.code !== 200) {
        return this.$message.error("加载用户歌单信息失败 !");
      }
      this.playlistNumber = res.playlist.length;
      this.playlist = res.playlist;
      // console.log(res);
    },
    // 获取歌单页面
    async go_playlist(index, id) {
      this.playlist_index = index;
      window.sessionStorage.setItem("playlist_index", this.playlist_index);
      if (index !== 0) {
        const {data: res} = await this.$http.get(
          `/playlist/track/all?id=${id}`
        );
        if (res.code !== 200) {
          return this.$message.error('歌单获取失败 !')
        }
        const {songs} = res
        this.playlistData = songs
      } else {
        // 喜欢的音乐(存在301问题，暂时还没有解决)
        const res = await this.$http.get(`/likelist?uid=1331265911`)
        console.log(res)
      }
      window.sessionStorage.removeItem('music_id')
    },
    // 选中歌曲事件
    handleCurrentChange (val) {
      window.sessionStorage.setItem("music_id", val.id)
    }
  },
  mounted() {
    this.getUserInfo();
    this.getUserSongsList();
  },
  computed: {
    sex() {
      if (this.gender === 1) {
        return "iconfont icon-xingbienan";
      } else {
        return "iconfont icon-xingbienv";
      }
    },
    age() {
      return getAge(this.birthday);
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-aside {
  background-color: rgb(194, 230, 154);
  height: 100%;
  .card_avatar {
    width: 360px;
    height: 170px;
    background-color: #fff;
    border-radius: 10px;
    margin: 70px auto 30px auto;
    box-shadow: 0 2px 20px #aaa;
    .avatar {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      transform: translateY(-50%);
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .nickname {
      width: 100%;
      // background-color: #bfa;
      text-align: center;
      transform: translateY(-40px);
      span {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .level {
      width: 100%;
      display: flex;
      justify-content: center;
      font-size: 14px;
      transform: translateY(-30px);
      // background-color: pink;
      color: #6e6e6e;
      div {
        padding: 0 10px;
        border-right: 1px dotted #6e6e6e;
      }
      div:nth-child(3) {
        border: none;
      }
    }
    .accountInfo {
      display: flex;
      justify-content: center;
      font-size: 14px;
      transform: translateY(-16px);
      div {
        width: 100px;
        border: 1px solid #eee;
        background-color: #ecf5ff;
        text-align: center;
        margin: 0 10px;
        border-radius: 2px;
      }
    }
  }
  .card_playlist {
    width: 360px;
    background-color: #fff;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 2px 20px #aaa;
    border-radius: 10px;

    .span_header {
      font-size: 12px;
      margin: 20px 14px;
      color: #999;
    }
    .item_playlist {
      height: 60px;
      margin: 10px 0;
      padding: 0 12px;
      cursor: pointer;
      display: flex;
      div:nth-child(1) {
        height: 100%;
        margin-right: 10px;
        img {
          height: 100%;
          vertical-align: text-top;
          border-radius: 10%;
        }
      }
      div:nth-child(2) {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          font-size: 13px;
          color: black;
        }
        p {
          font-size: 12px;
        }
      }
    }
    .item_playlist:hover {
      background-color: #eee;
    }
  }
}
.el-main {
  background-color: rgb(18, 207, 106);
  .el-card {
    margin-bottom: 40px;
    border-radius: 10px;
    cursor: pointer;
  }
}
// 选中效果
.playlist_selected {
  border-right: 1px solid red;
  background-color: #eee;
}
</style>